<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朝阳区档案馆</title>
    <link rel="stylesheet" href="../assets/common/common.css">
    <link rel="stylesheet" href="styles.css">
    <!-- <link rel="stylesheet" href="theme.css"> -->
</head>

<body>
    <!-- 上方图片区域 -->
    <div class="header-image">
        <div class="carousel-container">
            <img src="../assets/pic-tip.png" alt="标题" class="carousel-image">
            <div class="carousel-slide carousel-slide-1">
            </div>
            <div class="carousel-slide carousel-slide-2">
            </div>
            <div class="carousel-slide carousel-slide-3">
            </div>
            <div class="carousel-slide carousel-slide-4">
            </div>
            <!-- 轮播图指示器 -->
            <div class="carousel-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
                <span class="indicator" data-slide="3"></span>
            </div>
        </div>
    </div>

    <!-- 中间菜单区域 -->
    <div class="menu-container">
        <ul class="main-menu">
            <li class="menu-item " data-menu="home">首页</li>
            <li class="menu-item" data-menu="status">工作动态
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="status1">馆办动态</li>
                    <li class="submenu-item" data-submenu="statu2">业内动态</li>
                </ul>
            </li>
            <li class="menu-item " data-menu="notices">通知公告</li>
            <li class="menu-item has-submenu active" data-menu="services">
                公众服务
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="service4">查档指南</li>
                    <li class="submenu-item" data-submenu="service5">开放档案</li>
                    <li class="submenu-item" data-submenu="service1">观展预约</li>
                    <li class="submenu-item" data-submenu="service3">档案捐赠</li>
                    <li class="submenu-item" data-submenu="service2">业务咨询</li>

                </ul>
            </li>
           
           <li class="menu-item" data-menu="culture">档案方志文化
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="culture2">朝阳兰台</li>
                    <li class="submenu-item" data-submenu="culture3">志鉴文化</li>
                    <li class="submenu-item" data-submenu="culture1">网上展厅</li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 中部内容区域 -->
    <div class="content-container">
        <div class="bar"></div>
        <div class="content-wrapper">
            <!-- 左侧树形菜单 -->
            <div class="tree-container">
                <ul class="tree-menu">
                    <li class="tree-item" data-tree="public-service">
                        <span class="tree-text" style="color:#fff">公众服务</span>
                    </li>
                    <li class="tree-item selected" data-tree="exhibition">
                        <span class="tree-text">查档指南</span>
                        <span class="tree-arrow">▶</span>
                    </li>
                    <li class="tree-item" data-tree="inquiry">
                        <span class="tree-text">开放档案</span>
                        <span class="tree-arrow">▶</span>
                    </li>
                    <li class="tree-item" data-tree="reservation">
                        <span class="tree-text">观展预约</span>
                        <span class="tree-arrow">▶</span>
                    </li>
                   
                    <li class="tree-item" data-tree="donation">
                        <span class="tree-text">档案捐赠</span>
                        <span class="tree-arrow">▶</span>
                    </li>
                     <li class="tree-item" data-tree="message">
                        <span class="tree-text">业务咨询</span>
                        <span class="tree-arrow">▶</span>
                    </li>
                </ul>
            </div>

            <!-- 右侧列表区域 -->
            <div class="list-container">
                <div class="list-header">
                    <div id="current-menu">
                        <div class="title">查档指南</div>
                    </div>
                </div>
                <!-- 档案公布 -->
                <div class="intro-container" style="display:none">
                    <!-- 检索框区域 -->
                    <div class="search-container">
                        <div class="custom-select custom-select-search">
                            <select id="search-type">
                                <option value="all">全部</option>
                                <option value="title">开放档案</option>
                                <option value="type">类型</option>
                                <option value="year">年代</option>
                            </select>
                            <div class="arrow"></div>
                        </div>
                        <input type="text" id="search-input" placeholder="请输入检索内容">
                        <button id="search-btn">搜索</button>
                    </div>

                    <!-- 列表区域 -->
                    <div class="list-content">
                        <table id="data-table">
                            <thead>
                                <tr>
                                    <th>标题</th>
                                    <th>类型</th>
                                    <th>年代</th>
                                    <th>数量</th>
                                    <th>文号</th>
                                    <th>保管期限</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="data-list">
                                <!-- 列表项将通过JS动态生成 -->
                            </tbody>
                        </table>
                    </div>
                    <div class="pagination">
                        <button id="prev-page">&lt;</button>
                        <span id="page-info"></span>
                        <button id="next-page">&gt;</button>
                        <div class="custom-select pagination-select">
                            <select id="page-size">
                                <option value="5">5条</option>
                                <option value="10" selected>10条</option>
                                <option value="20">20条</option>
                                <option value="50">50条</option>
                            </select>
                            <div class="arrow"></div>
                        </div>
                        <input type="number" id="page-input" placeholder="跳转到...">
                    </div>
                </div>
                <!-- 查档指南 -->
                <div class="guide-container" style="display: none;">
                    <!-- 查档指南内容 -->
                    <div class="guide-content" id="guide-content-inquiry">
                        <h3>查档指南</h3>
                        <p>欢迎您到朝阳区档案馆查阅档案，为了更好地为您服务，请您遵守以下规定：</p>
                        <h4>查阅流程</h4>
                        <ol>
                            <li>查阅者需凭有效身份证件（身份证、护照等）登记</li>
                            <li>填写查档申请书，说明查阅目的和范围</li>
                            <li>工作人员根据申请检索相关档案</li>
                            <li>查阅者在指定场所查阅档案</li>
                        </ol>
                        <h4>注意事项</h4>
                        <ul>
                            <li>查阅开放档案需出示有效证件</li>
                            <li>查阅未开放档案需办理相关审批手续</li>
                            <li>禁止在档案上勾画、涂改、折叠</li>
                            <li>未经许可，不得复制、拍照档案</li>
                        </ul>
                        <h4>地址</h4>
                        <p>北京市朝阳区 Archivum, 100020</p>
                        <h4>交通路线</h4>
                        <p>步行10分钟</p>
                        <h4>联系电话</h4>
                        <p>010-84567890</p>
                    </div>

                    <!-- 业务咨询内容 -->
                    <div class="guide-content" id="guide-content-service2" style="display: none;">
                        <h3>业务咨询</h3>
                        <p>欢迎您通过以下方式咨询档案相关问题，我们将尽快回复您：</p>
                        <form class="inquiry-form">
                            <div class="form-group">
                                <label for="name">姓名：</label>
                                <input type="text" id="name" name="name" placeholder="请输入您的姓名">
                            </div>
                            <div class="form-group">
                                <label for="contact">联系方式：</label>
                                <input type="text" id="contact" name="contact" placeholder="请输入您的电话或邮箱">
                            </div>
                            <div class="form-group">
                                <label for="subject">咨询主题：</label>
                                <select id="subject" name="subject">
                                    <option value="">请选择咨询主题</option>
                                    <option value="查档流程">查档流程</option>
                                    <option value="档案利用">档案利用</option>
                                    <option value="档案捐赠">档案捐赠</option>
                                    <option value="其他问题">其他问题</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="message">咨询内容：</label>
                                <textarea id="message" name="message" rows="5" placeholder="请输入您的咨询内容"></textarea>
                            </div>
                            <div class="form-group">
                                <input type="submit" value="提交咨询">
                                <input type="reset" value="重置">
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 档案捐赠信息 -->
                <div class="list-content-container" style="display: block;">
                    <div class="list-content">
                        <ul id="data-list-donation">
                            <!-- 列表项将通过JS动态生成 -->
                        </ul>
                    </div>
                    <div class="pagination-donation">
                        <button id="prev-page-donation">&lt;</button>
                        <span id="page-info-donation"></span>
                        <button id="next-page-donation">&gt;</button>
                        <div class="custom-select">
                            <select id="page-size-donation">
                                <option value="5">5条</option>
                                <option value="10" selected>10条</option>
                                <option value="20">20条</option>
                                <option value="50">50条</option>
                            </select>
                            <div class="arrow"></div>
                        </div>
                        <input type="number" id="page-input-donation" placeholder="跳转到...">
                    </div>
                </div>
                <!-- 业务咨询 -->
                <div class="consultation-message" style="display: none;">
                    <form id="consultation-form">
                        <div class="form-group">
                            <label for="name">姓名：</label>
                            <input type="text" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">电话：</label>
                            <input type="tel" id="phone" required>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱：</label>
                            <input type="email" id="email">
                        </div>
                        <div class="form-group">
                            <label for="type">咨询类型：</label>
                            <select id="type" required>
                                <option value="">请选择咨询类型</option>
                                <option value="archive">档案查询</option>
                                <option value="exhibition">展览咨询</option>
                                <option value="donation">档案捐赠</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="content">咨询内容：</label>
                            <textarea id="content" rows="5" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="captcha">验证码：</label>
                            <input type="text" id="captcha" required>
                            <img src="../assets/captcha.png" alt="验证码" id="captcha-img">
                        </div>
                        <div class="form-buttons">
                            <button type="reset">重置</button>
                            <button type="submit">提交</button>
                        </div>
                    </form>
                </div>
                <!-- 观展预约 -->
                <div class="watch-reservation" style="display: none;">
                    <form id="reservation-form">
                        <div class="form-group">
                            <label for="reservation-name">姓名：</label>
                            <input type="text" id="reservation-name" required>
                        </div>
                        <div class="form-group">
                            <label for="reservation-phone">电话：</label>
                            <input type="tel" id="reservation-phone" required>
                        </div>
                        <div class="form-group">
                            <label for="exhibition">展览名称：</label>
                            <select id="exhibition" required>
                                <option value="">请选择展览</option>
                                <option value="exhibition1">朝阳区历史文化展</option>
                                <option value="exhibition2">改革开放40周年成果展</option>
                                <option value="exhibition3">红色记忆档案展</option>
                                <option value="exhibition4">非遗文化传承展</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date">参观日期：</label>
                            <input type="date" id="date" required>
                        </div>
                        <div class="form-group">
                            <label for="time">参观时段：</label>
                            <select id="time" required>
                                <option value="">请选择时段</option>
                                <option value="morning">上午 (9:00-11:30)</option>
                                <option value="afternoon1">下午 (13:00-15:00)</option>
                                <option value="afternoon2">下午 (15:30-17:00)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="visitors">参观人数：</label>
                            <input type="number" id="visitors" min="1" max="20" required>
                        </div>
                        <div class="form-group">
                            <label for="remarks">备注：</label>
                            <textarea id="remarks" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="reservation-captcha">验证码：</label>
                            <input type="text" id="reservation-captcha" required>
                            <img src="../assets/captcha.png" alt="验证码" id="reservation-captcha-img">
                        </div>
                        <div class="form-buttons">
                            <button type="reset">重置</button>
                            <button type="submit">提交预约</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 下方信息页 -->
    <div class="footer-info">
        <div class="footer-content">
            <div class="footer-links">
                <div class="footer-section">
                    <p>友情链接</p>
                    <p>联系我们</p>
                    <p>版权声明</p>

                </div>

            </div>
            <p>京ICP备05008885号 京公网安备11010102003012号</p>
            <div class="footer-copyright">
                <p>版权所有： 2023 朝阳区档案馆.</p>
            </div>
            <img src="../assets/shiyedanwei.png" class="shi-icon">
        </div>
    </div>

    <script src="../assets/common/common.js"></script>
    <script src="script.js"></script>
</body>

</html>